<template>
  <div id="app">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

    <el-form-item label="">
      <el-input v-model="formInline.goodsSn" placeholder="请输入商品ID"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-input v-model="formInline.categoryId" placeholder="请输入商品所属类目ID"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
    </el-form-item>
    
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查 询</el-button>
      <el-button type="primary"  @click="addclick">添 加</el-button>
    </el-form-item>
      </el-form>
      
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="商品ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="120">
        </el-table-column>
        <el-table-column
          fixed
          prop="picUrl"
          label="图片"
          width="120">
          <template slot-scope="scope">
          <img :src="scope.row.picUrl" min-width="70" height="70" />
        </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="shareUrl"
          label="分享图"
          width="100">
          <template slot-scope="scope">
          <img :src="scope.row.shareUrl" min-width="70" height="70" />
        </template>
        </el-table-column>
        <el-table-column
          prop="details"
          label="详情"
          width="100">
        </el-table-column>
        <el-table-column
          prop="counterPrice"
          label="市场售价"
          width="100">
        </el-table-column>
        <el-table-column
          prop="retailPrice"
          label="当前价格"
          width="100">
        </el-table-column>
        <el-table-column
          prop="isNew"
          label="是否新品"
          width="120">
          <template slot-scope="scope">
          <el-button type="success" plain v-if="scope.row.isNew == 0">否</el-button>
          <el-button type="danger" plain v-else>新品</el-button>
        </template>
        </el-table-column>
        <el-table-column
          prop="isHot"
          label="是否热门"
          width="120">
          <template slot-scope="scope">
          <el-button type="success" plain v-if="scope.row.isHot == 0">否</el-button>
          <el-button type="danger" plain v-else>热门</el-button>
        </template>
        </el-table-column>
        <el-table-column
          prop="isOnSale"
          label="是否在售"
          width="120">
          <template slot-scope="scope">
          <el-button type="danger" plain v-if="scope.row.isOnSale == 0">否</el-button>
          <el-button type="success" plain v-else>在售</el-button>
        </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="updClick(scope.row)"  size="small">编辑</el-button>
            <el-button type="danger" @click="delPlan(scope.row.id)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="formInline.pageNo"
      :page-size="formInline.pageSize"
      >
    </el-pagination>

    <el-dialog title="添加页面" :visible.sync="addFrm">
      <el-form :model="form">
        <el-form-item label="商品编号" :label-width="formLabelWidth">
          <el-input v-model="form.goodsSn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
           <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市场售价" :label-width="formLabelWidth">
           <el-input v-model="form.counterPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前售价" :label-width="formLabelWidth">
           <el-input v-model="form.retailPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否新品" :label-width="formLabelWidth">
           <el-radio v-model="form.isNew" label="1">新品</el-radio>
          <el-radio v-model="form.isNew" label="0">非新品</el-radio>
        </el-form-item>
        <el-form-item label="是否热卖" :label-width="formLabelWidth">
          <el-radio v-model="form.isHot" label="0">普通</el-radio>
          <el-radio v-model="form.isHot" label="1">热卖</el-radio>
        </el-form-item>
        <el-form-item label="是否在售" :label-width="formLabelWidth">
          <el-radio v-model="form.isOnSale" label="1">在售</el-radio>
          <el-radio v-model="form.isOnSale" label="0">不在售</el-radio>
        </el-form-item>

        <el-form-item label="上传商品图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="10"
            multiple
            :on-remove="handleRemove"
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!-- <el-form-item label="宣传画廊" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="10"
            multiple
            :on-remove="handleRemove"
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="商品单位" :label-width="formLabelWidth">
           <el-input v-model="form.unit" autocomplete="off"  placeholder="件 / 个 / 盒"></el-input>
        </el-form-item>
        <el-form-item label="关键字" :label-width="formLabelWidth">
           <el-input v-model="form.keywords" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" :label-width="formLabelWidth">
          <el-select v-model="form.categoryId" placeholder="请选择">
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :label="item.name"
            :value="item.id">
              {{item.name}}
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="所属品牌商" :label-width="formLabelWidth">
          <el-select v-model="form.brandId" placeholder="请选择">
          <el-option
            v-for="item in brands"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            {{item.name}}
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="商品简介" :label-width="formLabelWidth">
           <el-input v-model="form.brief" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品详细介绍" :label-width="formLabelWidth">
           <el-input v-model="form.detail" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFrm = false">取 消</el-button>
        <el-button @click="addPlan">添 加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改页面" :visible.sync="updFrm">
      <el-form :model="form">
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="商品编号" :label-width="formLabelWidth">
          <el-input v-model="form.goodsSn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
           <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市场售价" :label-width="formLabelWidth">
           <el-input v-model="form.counterPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前售价" :label-width="formLabelWidth">
           <el-input v-model="form.retailPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否新品" :label-width="formLabelWidth">
           <el-radio v-model="form.isNew" label="1">新品</el-radio>
          <el-radio v-model="form.isNew" label="0">非新品</el-radio>
        </el-form-item>
        <el-form-item label="是否热卖" :label-width="formLabelWidth">
          <el-radio v-model="form.isHot" label="0">普通</el-radio>
          <el-radio v-model="form.isHot" label="1">热卖</el-radio>
        </el-form-item>
        <el-form-item label="是否在售" :label-width="formLabelWidth">
          <el-radio v-model="form.isOnSale" label="1" >在售</el-radio>
          <el-radio v-model="form.isOnSale" label="0" >不在售</el-radio>
        </el-form-item>

        <el-form-item label="上传商品图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="10"
            multiple
            :on-remove="handleRemove"
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!-- <el-form-item label="宣传画廊" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="10"
            multiple
            :on-remove="handleRemove"
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="商品单位" :label-width="formLabelWidth">
           <el-input v-model="form.unit" autocomplete="off"  placeholder="件 / 个 / 盒"></el-input>
        </el-form-item>
        <el-form-item label="关键字" :label-width="formLabelWidth">
           <el-input v-model="form.keywords" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" :label-width="formLabelWidth">
          <el-select v-model="form.categoryId" placeholder="请选择">
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :label="item.name"
            :value="item.id">
              {{item.name}}
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="所属品牌商" :label-width="formLabelWidth">
          <el-select v-model="form.brandId" placeholder="请选择">
          <el-option
            v-for="item in brands"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            {{item.name}}
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="商品简介" :label-width="formLabelWidth">
           <el-input v-model="form.brief" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品详细介绍" :label-width="formLabelWidth">
           <el-input v-model="form.detail" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFrm = false">取 消</el-button>
        <el-button @click="updPlan">修 改</el-button>
      </div>
    </el-dialog>

    
    
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    handlerChange(file, files) {
      this.fileList = files;
    },
    handleRemove(file, fileList) {
      console.log("删除之前:{}", this.imageUrls);

      console.log(file, fileList);
      for (var i = 0; i < this.imageUrls.length; i++) {
        if (this.imageUrls[i] == file.url) {
          this.imageUrls.splice(i, 1);
        }
      }

      console.log("删除之后:{}",this.imageUrls);
    },
    delPlan(id){
      var $this=this;
      this.axios({
        method:'get',
        url: "http://localhost:8083/goods/delete",
        params:{"id":id}
      }).then(function(res){
        alert("删除成功");
         $this.getList();
      })
    },
    updPlan(){
      var formData = new FormData();
          //将原来form 的值添加到 formData中
          for (var o in this.form) {
            formData.append(o, this.form[o]);
          }
          this.fileList.forEach(function(file) {
            if (file.raw) {
              formData.append("files", file.raw, file.name);
            }
          });
          this.imageUrls.forEach(function(image) {
            formData.append("images", image);
          });

          //设置图片上传的格式
          let config = {
            "Content-Type": "multipart/form-data"
          };

          console.log("formData----------------->", formData);
          for (var key of formData.keys()) {
            console.log("key:{},value:{}", key, formData.get(key));
          }
      var $this=this;
      this.axios({
        method:'put',
        url: "http://127.0.0.1:8083/goods/upd",
        data: formData,
        config: config
      }).then(function(res){
        alert("修改成功");
         $this.getList();
        $this.updFrm=false;
      })
    },
    updClick(row){
      var $this=this;
      this.updFrm=true;
      this.fileList = [];
      this.imageUrls = [];
       this.form.id=row.id;
      this.form.goodsSn=row.goodsSn;
      this.form.name=row.name;
      this.form.counterPrice=row.counterPrice;
      this.form.retailPrice=row.retailPrice;
      this.form.keywords=row.keywords;
      this.form.unit=row.unit;
      this.form.brief=row.brief;
      this.form.detail=row.detail;
      this.form.categoryId=row.categoryId;
      this.form.brandId=row.brandId;
      // this.form.isOnSale=row.isOnSale;
      // this.form.isHot=row.isHot;
      // this.form.isNew=row.isNew;
      this.fileList.push({ name: row.name, url: row.picUrl });
      this.imageUrls.push(row.userface);
       this.axios({
         method:'get',
         url: "http://localhost:8083/brand/list",
       }).then(function(res){
         console.log("@@@@@@@@",res.data.obj);
        $this.brands=res.data.obj
       }),
       this.axios({
         method:'get',
         url: "http://localhost:8083/category/list",
       }).then(function(res){
         console.log("@@@@@@@@",res.data.obj);
        $this.categorys=res.data.obj
       })
    },
    addPlan(){
      var formData = new FormData();
          //将原来form 的值添加到 formData中
          for (var o in this.form) {
            formData.append(o, this.form[o]);
          }
          this.fileList.forEach(function(file) {
            if (file.raw) {
              formData.append("files", file.raw, file.name);
            }
          });
          this.imageUrls.forEach(function(image) {
            formData.append("images", image);
          });

          //设置图片上传的格式
          let config = {
            "Content-Type": "multipart/form-data"
          };

          console.log("formData----------------->", formData);
          for (var key of formData.keys()) {
            console.log("key:{},value:{}", key, formData.get(key));
          }
      var $this=this;
      this.axios({
        method:'post',
        url: "http://127.0.0.1:8083/goods/add",
        data: formData,
        config: config
      }).then(function(res){
        alert("添加成功");
         $this.getList();
        $this.addFrm=false;
      })
       
    },
    addclick(){
      var $this=this;
      // $this.form=[];
      this.addFrm=true;
      this.fileList = [];
      this.axios({
         method:'get',
         url: "http://localhost:8083/brand/list",
       }).then(function(res){
         console.log("@@@@@@@@",res.data.obj);
        $this.brands=res.data.obj
       }),
       this.axios({
         method:'get',
         url: "http://localhost:8083/category/list",
       }).then(function(res){
         console.log("@@@@@@@@",res.data.obj);
        $this.categorys=res.data.obj
       })

    },
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      this.getList();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.formInline.pageNo=val;
        this.getList();
        console.log(`当前页: ${val}`);
      },
    onSubmit() {
        this.getList();
        console.log('submit!');
      },
    getList(){
      var $this=this;
      this.axios({
      method:'get',
      url: "http://localhost:8083/goods/list",
      params:this.formInline
    }).then(function(res){
        console.log(res);
        $this.tableData=res.data.obj.list; 
        $this.total=res.data.obj.total;
    });
    }
  },
  data () {
    return {
      categorys:[],
      brands:[],
      formLabelWidth: '120px',
      addFrm:false,
      updFrm:false,
      lookFrm:false,
      tableData:[],
      formInline: {
          pageNo: 1,
          pageSize:20
        },
        form:{
          id:'',
          detail:'',
          brief:'',
          brandId:'',
          categoryId:'',
          keywords:'',
          unit:'',
          goodsSn:'',
          counterPrice:'',
          retailPrice:'',
          brandId:'',
          isNew: '1',
          isHot: '0',
          isOnSale: '1',
          name:'',
        },
        total:0,
        fileList: [],
      imageUrl: "",
      imageUrls: []
    }
  },mounted(){
    this.getList();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
